/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-indicator {
	&--dot {
		display: inline-flex;
		flex-direction: var(--pure-indicator-direction, row);
		align-items: var(--pure-indicator-align-items, center);
		justify-content: var(--pure-indicator-justify-content, center);
		gap: var(--pure-indicator-gap, 5px);
	}

	&__dot {
		width: var(--pure-indicator-dot-size, 8px);
		height: var(--pure-indicator-dot-size, 8px);
		border-radius: var(--pure-indicator-dot-radius, var(--pure-radius-circle));
		position: relative;
		overflow: hidden;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--pure-indicator-color, var(--pure-background-mask));
			transition: var(--pure-indicator-transition, 0.5s);
			z-index: 1;
			border-radius: inherit;
		}

		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--pure-indicator-active-color, var(--pure-theme-primary));
			opacity: 0;
			transition: var(--pure-indicator-transition, 0.5s);
			z-index: 1;
			border-radius: inherit;
		}

		&--active {
			& ::before {
				opacity: 0;
			}

			&::after {
				opacity: 1;
			}
		}
	}
}
